<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入库管理</title>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <script src='../lib/bootstrap-3.3.5-dist/js/jquery-3.6.0.js'></script>
    <script src='../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js'></script>
    <script src='../javascript/data.js'></script>
    <link rel="stylesheet" href="../css/nav.css">
    <script src="../javascript/rkgl.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #rkgl {
            margin: 2%;
            border: 1px solid #ddd;
        }
        
        #rkgl>div:first-child {
            background-color: rgb(239, 243, 248);
        }
        
        .menu_rk,
        .add_rk {
            border: none;
            color: white;
            background-color: rgb(36, 104, 169);
            border-top: 5px solid rgb(36, 104, 169);
            padding: 6px 25px;
            margin-top: 5px;
        }
        
        .menu_rk {
            margin-left: 3%;
        }
        
        .T_nav {
            border-left: 1px solid rgb(36, 104, 169);
            border-right: 1px solid rgb(36, 104, 169);
            background-color: white;
            color: rgb(36, 104, 169);
        }
        
        #table_rk {
            margin: 20px 1%;
            width: 98%;
        }
        
        #table_rk th {
            background-color: rgb(243, 243, 243);
            padding: 10px 20px;
            border: 1px solid #ddd;
        }
        
        #table_rk td {
            padding: 10px 20px;
            border: 1px solid #ddd;
        }
        
        #table_rk td>button {
            color: white;
            border: none;
            background-color: rgb(36, 104, 169);
            padding: 3px 5px;
        }
        
        #table_rk td:last-child button {
            background-color: rgb(183, 70, 53);
        }
        
        .page_style {
            text-align: center;
            border: 1px solid rgb(238, 238, 238);
            float: left;
            padding: 10px 15px;
            margin: 10px 10px 0 0;
            cursor: pointer;
        }
        
        .page_style:hover {
            border: 1px solid rgb(36, 104, 169);
            color: rgb(36, 104, 169);
        }
        
        .T_page {
            background-color: rgb(36, 104, 169);
            color: white;
        }
        
        #page_rkgl {
            float: right;
            margin: 1%;
        }
        
        .display {
            display: none;
        }
        
        #add_rkgl {
            margin: 2% 10%;
        }
        
        #add_rkgl>div>label {
            float: left;
            text-align: right;
            margin-right: 2%;
            width: 10%;
            font-size: 20px;
        }
        
        #add_rkgl>div>div {
            float: left;
            width: 60%;
            margin-bottom: 1%;
        }
        
        #add_rkgl>div>div>select,
        #add_rkgl>div>div>input,
        #add_rkgl>div>div>textarea {
            width: 100%;
            height: 30px;
            padding: 5px;
            margin-bottom: 5px;
        }
        
        #add_rkgl>div>div>textarea {
            height: 120px;
            min-width: 100%;
            max-width: 100%;
        }
        
        #add_rkgl>button {
            color: white;
            background-color: rgb(67, 142, 185);
            border: none;
            padding: 6px 12px;
            margin-left: 12%;
        }
        
        #change_rk label {
            width: 20%;
            text-align: right;
            margin-right: 5%;
        }
        
        #change_rk select,
        #change_rk input,
        #change_rk textarea {
            width: 50%;
            height: 30px;
            padding-left: 5px;
        }
        
        #change_rk textarea {
            height: 50px;
            min-width: 50%;
            max-width: 50%;
        }
        
        #box_header {
            text-align: center;
        }
        
        #box_header span {
            color: rgb(250, 207, 72);
            margin: 50px 10px;
        }
        
        #table_rk tr:hover {
            background-color: rgb(245, 245, 245);
        }
    </style>
</head>

<body>
    <!-- 导航 -->
    <header id="header" class="clearfix">
        <span>经销存管理系统</span>
        <div class="clearfix">
            <div>
                <span class="glyphicon glyphicon-triangle-bottom"></span>
            </div>
            <div>管理员</div>
            <div>
                <span class="glyphicon glyphicon-user"></span>
            </div>
    </header>
    <div id="left_nav">
        <div id="nav">
            <li id="nav_header">
                <span class="glyphicon glyphicon-cog"></span> 系统菜单
                <span class="glyphicon glyphicon-chevron-up"></span>
            </li>
            <li page-data='page1'>分类管理</li>
            <li page-data='page2'>库存管理</li>
            <li page-data='page3'>入库管理</li>
            <li page-data='page4'>预警信息设置</li>
            <li page-data='page5'>出库管理</li>
            <li page-data='page6'>用户管理</li>
            <li page-data='page7'>修改密码</li>
        </div>
    </div>

    <!-- 内容 -->
    <div id="content">
        <div id="rkgl" class="clearfix">
            <!-- 头部按钮 -->
            <div>
                <button class="menu_rk T_nav" onclick="menu_rkgl()">入库管理</button>
                <button class="add_rk" onclick="menu_sprk()">商品入库</button>
            </div>
            <!-- 渲染区域 -->
            <table id="table_rk">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>商品名称</th>
                        <th>商品分类</th>
                        <th>入库数量</th>
                        <th>入库日期</th>
                        <th>编辑</th>
                        <th>删除</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>

            <!-- 分页按钮 -->
            <div id="page_rkgl" class="clearfix"></div>

            <!-- 入库管理 -->
            <div id="add_rkgl" class="display">
                <div class="clearfix">
                    <label>分类</label>
                    <div>
                        <select name="" id="add_rk_1"></select>
                        <span>分类</span>
                    </div>
                </div>
                <div class="clearfix">
                    <label>商品名称</label>
                    <div>
                        <select name="" id="add_rk_2"></select>
                        <span>商品</span>
                    </div>
                </div>
                <div class="clearfix">
                    <label>数量</label>
                    <div>
                        <input type="text" placeholder=" 数量" id="add_rk_3">
                        <span> 数量</span>
                    </div>
                </div>
                <div class="clearfix">
                    <label>备注</label>
                    <div>
                        <textarea name="" id="add_rk_4" cols="10" rows="1" placeholder="输入备注"></textarea>
                        <span>250字以内…</span>
                    </div>
                </div>
                <button data-toggle="modal" data-target="#TF_box" onclick="add_rk()">添加分类</button>
            </div>
        </div>

        <!-- 模态框 -->
        <div class="modal fade" id="change_rk" tabindex="-1" role="dialog" aria-labelledby="change_rk_Label">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="change_rk_Label">编辑 </h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group form-inline">
                                <label>分类:</label>
                                <select name="" id="change_rk_1"></select>
                            </div>
                            <div class="form-group form-inline">
                                <label>商品名称:</label>
                                <select name="" id="change_rk_2"></select>
                            </div>
                            <div class="form-group form-inline">
                                <label>数量:</label>
                                <input type="text" class="form-control" id="change_rk_3" placeholder=" 数量">
                            </div>
                            <div class="form-group form-inline">
                                <label>备注:</label>
                                <textarea name="" id="change_rk_4" cols="10" rows="1" placeholder="输入备注"></textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="T_change_rk()">确认</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 删除模态框 -->
        <div class="modal fade" id="TF_box" tabindex="-1" role="dialog" aria-labelledby="TF_box_Label">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="TF_box_Label">操作确认</h4>
                    </div>
                    <div class="modal-body" id="box_header">
                    </div>
                    <div class="modal-footer" id="box_footer">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        /* 设置页码绑定事件 */
        $('#page_rkgl').on('click', '.page_style', function(e) {
                now_page = parseInt($(this).text())
                page_turn(now_page, allData)
            })
            /* 导航 */
        let h = $(window).height()
        let h_judge
        $('#left_nav').css({
            'height': h + 'px',
        })
        $('#nav>li:first-child').on('click', function() {
            pullDown($(this))
        })
        $('#nav>li:first-child').siblings().on('click', function() {
            jumpPage($(this))
        })

        show(1)
    </script>
</body>

</html>